<style>


    .allin-top{
        margin: 20px auto;
        width: 80%;
    }
    .allin-top-p1{
        font-size: 16px;
    }
    .allin-top-p1 i{
        font-size: 14px;
    }
    .allin-top-p1>span{
        color: #f02828;
        font-size: 24px;
    }
    .allin-top-p2{
        color: #646464;
        font-size: 12px;

    }
    .echarts{
        width: 350px;
        height:350px;
        margin: 0 auto;
        position: relative;
        margin-top: -57px;

    }
    .echarts-info{
        width: 100px;
        position: absolute;
        top:100px;
        left: 50%;
        margin-left: -50px;
        margin-top: 25px;
        text-align: center;
        font-size: 18px;
        /*font-weight: 600;*/
        line-height: 25px;

    }
    .echarts-info>p:nth-child(1){
        color: #f2a116;
    }
    .echarts-info>p:nth-child(2){
        color: #ff6665;
    }
    .echarts-info>p:nth-child(3){
        color: #2ac4c4;
    }
    .allin-maker{
        position: relative;
        width: 320px;
        margin: 0 auto;
    }
    .allin-maker-info{
        position: absolute;
        top: -28px;
        color: #2fd7d8;
        text-align: center;
        font-size: 12px;
        white-space:nowrap;

    }

    .allin-maker-info_1 { left: -6px; }
    .allin-maker-info_2 { left: 26px; }
    .allin-maker-info_3 { left: 57px; }
    .allin-maker-info_4 { left: 90px; }
    .allin-maker-info_5 { left: 120px; }
    .allin-maker-info_6 { left: 153px; }
    .allin-maker-info_7 { left: 185px; }
    .allin-maker-info_8 { left: 216px; }
    .allin-maker-info_9 { left: 248px; }
    .allin-maker-info_10 { left: 280px; }

    .allin-input{
        display: block;
        margin: 0 auto;
        width: 320px;
        height: 43px;
        background-image: url('img/allin/rang3.png');
        background-size: 100% 8px;
        background-position: center;
        background-repeat: no-repeat;
        /*background-color: #f50;*/
        -webkit-appearance:inherit;
        outline: none;
        overflow: hidden;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 100%;


    }
    /*//滑动块大小*/
    /*在pc浏览器看不到此属性*/
    .allin-input:focus {
        outline: none;
    }
    .allin-input::-moz-focus-outer {
        /* hide the focus outline in Firefox */
        border: 0; }
    .allin-input::-webkit-slider-thumb {
        position: relative;
        /*margin-left: -8px;*/
        width: 25px;
        height: 25px;
        border-radius: 50%;

        background-color: #fff;
        /*opacity: 0.4;*/
        padding: 10px;
        /*box-shadow:  1px 1px 1px #eec277;*/
        cursor: pointer;
        -webkit-appearance: none;
        border: 1px solid #f8e6c7;
    }

    .allin-info{
        width: 320px;
        margin: -15px auto 0;
    }
    .allin-info-span{
        color:#999;font-size:20px;vertical-align: sub;margin-left: 3px;
    }
    .allin-info>div:nth-child(1){
        color: #fbc76c;
        font-size: 14px;
    }
    .allin-info>div:nth-child(2){
        color: #999999;
        font-size: 12px;
    }
    .allin-info>div:nth-child(3){
        color: #ff6b6a;
        font-size: 14px;
    }
    .allin-info-2{
        font-size: 14px;
        color: #000;
        margin: 10px 0 20px;
        text-align: center;
    }
    .allin-info-2>span{
        color: #037ae2;
        padding: 10px 4px;
    }
    .allin-btn{
        margin: 0 auto 30px;
        width: 260px;
        height: 50px;
        background-color: #f93841;
        border-radius: 10px;
        color: #ffffff;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
    }

</style>
<ion-view view-title="智能理财" >
    <ion-content class="bg-fff" style="padding-bottom: 40px">
        <!--<div class="allin-head">-->
            <!--智能投顾-->
        <!--</div>-->
        <div class="allin-top">
            <p class="allin-top-p1">
                预期年化收益&nbsp;&nbsp;<span>{{data.bean.minRevenue}}<i>%</i> ~ {{data.bean.maxRevenue}}<i>%</i></span>
            </p>
            <p class="allin-top-p2">
                固收部分预期年化收益率为{{data.bean.minRevenue}}%，浮动收益向上可能达到{{data.bean.maxRevenue}}%的年化收益率。
            </p>
            <p class="allin-top-p2" style="margin-top: -10px">投资100万，1年将获得预期收益{{data.bean.minRevenue}}万~{{data.bean.maxRevenue}}万。</p>
        </div>
        <div class="echarts">
            <div id="main" style="width: 350px;height:350px;margin: 0 auto"></div>
            <div class="echarts-info">
                <p>固收{{sledata.num1}}%</p>
                <p>权益{{sledata.num2}}%</p>
                <p>其他{{sledata.num3}}%</p>
            </div>
        </div>
        <div class="allin-maker">
            <div ng-if="data.bean.isEvaluation" class="allin-maker-info allin-maker-info_{{data.bean.stall}}" >
                <div>测评结果</div>
                <img class="allin-maker-img" src="img/allin/maker.png" width="13px" height="17px">
            </div>

            <input name="ran" style="margin-top: -18px" class="allin-input"  type="range"  ng-model="sledata.rangeStep" ng-change="slerange(value)" min="1" max="10" />
        </div>
        <div class="allin-info row row-padding">
            <div class="col">低</div>
            <div class="col">风险指数<span  class="allin-info-span">{{sledata.rangeStep}}</span></div>
            <div class="col text-right">高</div>
        </div>
        <div class="allin-info-2" style="padding: 15px">
            您的风险等级为{{data.bean.isEvaluation?data.bean.stall:'待测评'}}&nbsp;<span ng-click="modal.add()">{{data.bean.isEvaluation?'重新测评':'开始测评'}}>></span>
        </div>
        <div class="allin-btn"  ui-sref="scheme({stall:sledata.rangeStep})">
            根据风险等级，生成投资方案
        </div>
        <div style="height: 50px"></div>
    </ion-content>


</ion-view>